---
image: /generated/articles-docs-miscellaneous-ts-aliases.png
title: 'TypeScript aliases'
id: typescript-aliases
slug: /typescript-aliases
crumb: 'How to'
---

Typescript aliases are not supported by default, since the ESBuild Webpack loader we have does not support them.
You can however patch the [Webpack config](/docs/webpack) to make them resolve.

Assuming you have a file:

```
 └── src/
   ├── lib/
   │   ├── one.ts
   │   ├── two.ts
   ├── Root.tsx
   └── index.ts
```

and your tsconfig.json has the following `paths`:

```json
{
  "compilerOptions": {
    "paths": {
      "lib/*": ["./src/lib/*"]
    }
  }
}
```

you can add the aliases to Webpack, however you need to add each of them manually:

```ts twoslash
import path from 'path';
import {Config} from '@remotion/cli/config';

Config.overrideWebpackConfig((config) => {
  return {
    ...config,
    resolve: {
      ...config.resolve,
      alias: {
        ...(config.resolve?.alias ?? {}),
        lib: path.join(process.cwd(), 'src', 'lib'),
      },
    },
  };
});
```

Remember that in Node.JS APIs, the config file does not apply, so you need to add the Webpack override also to the [`bundle()`](/docs/bundle) and [`deploySite()`](/docs/lambda/deploysite) functions.

## Automatically syncing Webpack and TypeScript aliases

To not duplicate the aliases in your Webpack override and in your `tsconfig.json`, you can install `tsconfig-paths-webpack-plugin` and use it:

```ts
import {Config} from '@remotion/cli/config';
import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';

Config.overrideWebpackConfig((config) => {
  return {
    ...config,
    resolve: {
      ...config.resolve,
      plugins: [...(config.resolve?.plugins ?? []), new TsconfigPathsPlugin()],
    },
  };
});
```

:::warning
A common problem when enabling TypeScript aliases is that `import {} from "remotion"` will start mapping to the `remotion` folder that you may have in your project, like is the case in some of our templates.

We recommend that you don't use TypeScript aliases.
:::

## See also

- [Overriding webpack config](/docs/webpack)
